(function () {

    // 上数据图
    var chartDom = document.getElementById('max');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        grid: {
            // 文字显示
            containLabel: true,
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: [],
            // 刻度线
            axisTick: {
                show: true,
            },
            // 坐标线
            axisLine: {
                show: true,

            },
            // 字体颜色
            axisLabel: {
                color: ['skyblue']
            },
        }],
        yAxis: {
            type: 'value',
            // 刻度线
            axisTick: {
                show: true,
            },
            // 显示坐标线
            axisLine: {
                show: true,
            },
            // 改变字体颜色
            axisLabel: {
                color: ['skyblue']
            },
            splitLine: {
                show: false
            }
        },

        series: [{
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            data: [],
            type: 'line',
            areaStyle: {},
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {

                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: 'blue' },                   //柱图渐变色
                            { offset: 0.4, color: 'skyblue' },                 //柱图渐变色
                            { offset: 1, color: 'yellow' },                   //柱图渐变色
                        ]
                    )
                },
            },
            barWidth: 15,
        }]
    };

    option && myChart.setOption(option);

    // 下数据图
    var chartDom1 = document.getElementById('min');
    var myChart1 = echarts.init(chartDom1);
    var option1;

    option1 = {
        grid: {
            // 文字显示
            containLabel: true,
        },
        xAxis: [{
            type: 'category',
            data: [],
            axisTick: {
                show: true,

            }

            ,
            axisLine: {
                show: true,

            },
            // 字体颜色
            axisLabel: {
                color: ['skyblue']
            }


        }],
        yAxis: {
            // 字体颜色
            axisLabel: {
                color: ['skyblue']
            },
            type: 'value',
            // 刻度线
            axisTick: {
                show: true,
            }

            ,
            axisLine: {
                show: true,
            },
            splitLine: {
                show: false
            }


        },
        series: [{
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: 'blue' },                   //柱图渐变色
                            { offset: 0.4, color: 'skyblue' },                 //柱图渐变色
                            { offset: 1, color: 'yellow' },                   //柱图渐变色
                        ]
                    )
                },
            },
            barWidth: 15,


        }]
    };
    option1 && myChart1.setOption(option1);

    // 添加数据及渲染
    let arr = [];
    let obj = {};
    let i = 0;
    $('.bt').click(function () {

        let ul = $('.box_left_2 ul');
        let v1 = $('.v1').val();
        let v2 = $('.v2').val();
        let v3 = $('.v3').val();



        let reg = /^\d{1,5}$/
        let regss = /^\d{1,3}$/
        let regs = /^\D{1,5}$/

        if (regss.test(v2) && reg.test(v3) && regs.test(v1)) {
            alert('添加成功')

            obj.uname = v1
            obj.num = v2
            obj.sum = v3

            arr[arr.length] = obj

            let li = $(`
                     <li>
                         <p>${v1}</p>
                         <p>${v2}</p>
                         <p>${v3}</p>
                         <button>删除</button>
                     </li>
            `);
            ul.append(li)

            option1.xAxis[0].data.splice(i, 0, arr[i].uname)
            option1.series[0].data.splice(i, 0, arr[i].sum)
            option.xAxis[0].data.splice(i, 0, arr[i].uname)
            option.series[0].data.splice(i, 0, arr[i].num)

            // 显示数据图
            $('.box_right').css('visibility', 'visible')
            i++
            option && myChart.setOption(option);
            option1 && myChart1.setOption(option1);

            // 清空输入框内容
            $('.v1').val('');
            $('.v2').val('');
            $('.v3').val('');

        } else {
            alert('请输入正确的格式！')
        }

    });

    // 删除数据及渲染
    $('.box_left_2').on('click', 'button', function () {
        if (confirm('确定删除吗?')) {

            let k = $(this).parent().index();

            $(this).parent().remove();

            option1.xAxis[0].data.splice(k, 1);
            option1.series[0].data.splice(k, 1);
            option.xAxis[0].data.splice(k, 1);
            option.series[0].data.splice(k, 1);
            option && myChart.setOption(option);
            option1 && myChart1.setOption(option1);

        }
    });








    // --------------------分割线--------------------




    // let i = 0
    // let arr = []
    // $('.bt').on('click', function () {
    //     let obj = {}
    //     let ul = $('.box_left_2 ul');
    //     let v1 = $('.v1').val();
    //     let v2 = $('.v2').val();
    //     let v3 = $('.v3').val();

    //     if ($('.v1').val() == '') return
    //     if ($('.v2').val() == '') return
    //     if ($('.v3').val() == '') return


    //     obj.uname = v1
    //     obj.unum = v2
    //     obj.usex = v3
    //     arr.push(obj)
    //     ul.html('')
    //     $(arr).each(function (index, item) {
    //         ul.append(`
    //         <li>
    //         <p>${item.uname}</p>
    //         <p>${item.unum}</p>
    //         <p>${item.usex}</p>
    //         </li >
    //          `)
    //     })
    //     option1.xAxis[0].data.splice(i, 0, arr[i].uname)
    //     option1.series[0].data.splice(i, 0, arr[i].usex)
    //     option.xAxis[0].data.splice(i, 0, arr[i].uname)
    //     option.series[0].data.splice(i, 0, arr[i].unum)
    //     i++
    //     $('.box_right').css('visibility', 'visible')
    //     option1 && myChart1.setOption(option1);
    //     option && myChart.setOption(option);
    //     console.log(arr);

    //     $('.v1').val('');
    //     $('.v2').val('');
    //     $('.v3').val('');
    // })



    // --------------------分割线--------------------




    // $('.bt').on('click', function () {
    //     let obj = {}
    //     let ul = $('.box_left_2 ul');
    //     let v1 = $('.v1').val();
    //     let v2 = $('.v2').val();
    //     let v3 = $('.v3').val();
    //     obj.uname = v1
    //     obj.unum = v2
    //     obj.usex = v3
    //     ul.append(`
    //         <li>
    //         <p>${obj.uname}</p>
    //         <p>${obj.unum}</p>
    //         <p>${obj.usex}</p>
    //         </li >
    //          `)
    //     option1.xAxis[0].data.push(obj.uname)
    //     option1.series[0].data.push(obj.usex)
    //     option.xAxis[0].data.push(obj.uname)
    //     option.series[0].data.push(obj.unum)
    //     $('.box_right').css('visibility', 'visible')
    //     option1 && myChart1.setOption(option1);
    //     option && myChart.setOption(option);
    // })


})()